<template>
  <div id="box">
    <!--头部-->
    <el-container>
      <el-header style="height: 110px;background-color: white">
        <div class="permission_text">供应商资料</div>
        <div class="Breadcrumb"><span>首页</span><span>/</span><span>供应商基础设置</span><span>/</span><span>供应商管理</span></div>
      </el-header>
      <div id="table_gongying">
        <el-main style="height: 500px;width: 1220px; background-color: white">
          <div id="add">
            <div><span class="subhead">供应商管理</span></div>


            <!--按钮-->
            <div class="line"></div>
            <el-button type="success" style="margin-bottom: 15px" @click="dialogVisible = true">增加供应商</el-button>


            <!--搜索框-->
            <!-- <el-form :inline="true" :model="tableData" class="demo-form-inline">
               <el-form-item style="margin: -55px 310px">
                 <el-input v-model="id"></el-input>
               </el-form-item>
               <el-form-item style="margin: -55px -310px">
                 <el-button type="primary" @click="onSubmit">查询</el-button>
               </el-form-item>
             </el-form>-->
          </div>


          <!--弹出框-->
          <div>
            <el-dialog
              title="新增供应商"
              :visible.sync="dialogVisible"
              width="1000px"
              :before-close="handleClose">
              <el-form :inline="true" :model="tableData" class="demo-form-inline">
                <el-form-item label="序号">
                  <el-input v-model="id" placeholder="序号"></el-input>
                </el-form-item>
                <br/>
                <el-form-item label="供应商编码">
                  <el-input v-model="ghid" placeholder="供应商编码"></el-input>
                </el-form-item>
                <br/>
                <el-form-item label="供货商名称">
                  <el-input v-model="ghname" placeholder="供应商名称"></el-input>
                </el-form-item>
                <el-form-item label="联系人">
                  <el-input v-model="name" placeholder="联系人"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                  <el-input v-model="ipone" placeholder="联系电话"></el-input>
                </el-form-item>
                <br/>
                <el-form-item label="供应商地址">
                  <el-input v-model="address" placeholder="供应商地址" style="width: 500px"></el-input>
                </el-form-item>
                <el-form-item label="传真">
                  <el-input v-model="userchuanzhen" placeholder="传真"></el-input>
                </el-form-item>
                <br/>
                <el-form-item label="银行资料">
                  <el-input v-model="userbankziliao" placeholder="银行资料" style="width: 500px"></el-input>
                </el-form-item>
                <el-form-item label="邮件地址">
                  <el-input v-model="useryoujiandizhi" placeholder="邮件地址"></el-input>
                </el-form-item>
                <el-form-item label="备注信息" >
                  <el-input
                    type="textarea"
                    style="width: 800px"
                    :rows="2"
                    placeholder="请输入内容"
                    v-model="textarea">
                  </el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="add()">保存</el-button>
  </span>
            </el-dialog>
          </div>


          <!--删除弹框-->
          <!--   <div style="margin-left: 550px;">
               <el-popover
                 placement="top"
                 width="300"
                 height="200"
                 v-model="visible">
                 <p style="margin:20px 100px">确定删除吗？</p>
                 <div style="text-align: center; margin: 20px ">
                   <el-button size="mini" type="text" @click="visible = false">取消</el-button>
                   <el-button type="primary" size="mini" @click="del2(scope.row.id)">确定</el-button>
                 </div>
               </el-popover>
             </div>-->


          <!--表格-->
          <div>
            <el-table
              :data="tableData"
              border
              style="width: 100%"
            >
              <el-table-column
                fixed
                prop="id"
                align="center"
                label="序号"
                width="60"
              >
                <template slot-scope="scope">
            <span v-if="!scope.row.ifShow">
          <span :id="scope.row.id">{{ scope.row.id}}</span>
          </span>
                  <span v-else>{{scope.row.id}}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="ghname"
                label="供货商名称"
                width="150">
                <template slot-scope="scope">
            <span v-if="!scope.row.ifShow">
            <span :ghname="scope.row.ghname">{{ scope.row.ghname}}</span>
              </span>
                  <span v-else>{{scope.row.ghname}}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="ghid"
                label="供货商编码"
                width="120">
                <template slot-scope="scope">
            <span v-if="!scope.row.ifShow">
        <span :ghid="scope.row.ghid">{{ scope.row.ghid}}</span>
        </span>
                  <span v-else>{{scope.row.ghid}}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="ipone"
                label="联系电话"
                width="150">
                <template slot-scope="scope">
            <span v-if="!scope.row.ifShow">
        <span :ipone="scope.row.ipone">{{ scope.row.ipone}}</span>
        </span>
                  <span v-else>{{scope.row.ipone}}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="name"
                label="姓名"
                width="120">
                <template slot-scope="scope">
            <span v-if="!scope.row.ifShow">
        <span :name="scope.row.name">{{ scope.row.name}}</span>
        </span>
                  <span v-else>{{scope.row.name}}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                prop="address"
                label="地址"
                width="500">
                <template slot-scope="scope">
            <span v-if="!scope.row.ifShow">
        <span :address="scope.row.address">{{ scope.row.address}}</span>
        </span>
                  <span v-else>{{scope.row.address}}</span>
                </template>
              </el-table-column>
              <el-table-column
                align="center"
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">

                  <!--表格功能按钮-->
                  <el-button @click="handleClick_edit(scope.row);openTanChuang_edit()"  type="text" size="small">编辑</el-button>
                  <el-button type="text" size="small" @click="shanchu_open(scope.row.id)" slot="reference">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>

          <!--创建后点击后显示的商品库存统计列表-->
          <el-table
            :data="kucuntongji.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            border
            style="width: 100%"
            v-if="chailiao_click_kucunshow"
            v-loading="loading"
            @selection-change="tongji_chailiao_changeFun"
          >
            <el-table-column type="selection" width="55" align="center" fixed></el-table-column>
            <el-table-column v-for="item in tableData" :prop="item.prop" :label="item.label" width="100"
                             align="center">
            </el-table-column>
          </el-table>

          <!--分页-->
          <div class="block" v-if="material_list">
            <el-pagination
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              :current-page="currentPage"
              :page-sizes="[1, 2, 3, 5]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="tableData.length"
            >
            </el-pagination>
          </div>

          <!--编辑弹框-->
          <div>
            <el-dialog title="编辑" :visible.sync="dialogFormVisible" style="width: 2200px;margin-left: -300px">
              <el-form :model="form">
                <table>
                  <tr>
                    <td class="shenpi_td_jian">序号:</td>
                    <td class="shenpi_td_zhi">
                      <el-input v-model="form.hanghao" autocomplete="off"
                                style="width: 150px;margin-left:10px"></el-input>
                    </td>
                    <td class="shenpi_td_jian">供应商编码:</td>
                    <td class="shenpi_td_zhi">
                      <el-input v-model="form.weight" autocomplete="off" style="width: 150px;margin-left: 10px"></el-input>
                    </td>
                    <td class="shenpi_td_jian">供货商名称:</td>
                    <td class="shenpi_td_zhi">
                      <el-input  v-model="form.status" autocomplete="off"
                                 style="width: 150px;margin-left: 10px"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="shenpi_td_jian">联系人:</td>
                    <td class="shenpi_td_zhi">
                      <el-input v-model="form.danjubianhao" autocomplete="off"
                                style="width: 150px;margin-left: 10px"></el-input>
                    </td>
                    <td class="shenpi_td_jian">联系电话:</td>
                    <td class="shenpi_td_zhi">
                      <el-input v-model="form.zongbumingcheng" autocomplete="off"
                                style="width: 150px;margin-left: 10px"></el-input>
                    </td>
                    <td class="shenpi_td_jian">供应商地址:</td>
                    <td class="shenpi_td_zhi">
                      <el-input  v-model="form.fendian" autocomplete="off"
                                 style="width: 150px;margin-left: 10px"></el-input>
                    </td>
                  </tr>
                  <tr>
                    <td class="shenpi_td_jian">传真:</td>
                    <td class="shenpi_td_zhi">
                      <el-input v-model="form.leikumingcheng" autocomplete="off"
                                style="width: 150px;margin-left: 10px"></el-input>
                    </td>
                    <td class="shenpi_td_jian">银行资料:</td>
                    <td class="shenpi_td_zhi">
                      <el-input v-model="form.shuliang" autocomplete="off" style="width: 150px;margin-left: 10px"></el-input>
                    </td>
                    <td class="shenpi_td_jian">邮件地址:</td>
                    <td class="shenpi_td_zhi">
                      <el-input v-model="form.chuangdanriqi" autocomplete="off"
                                style="width: 150px;margin-left: 10px"></el-input>
                    </td>
                  </tr>

                  <tr style="margin-top: 10px">
                    <td class="shenpi_td_jian">备注信息:</td>
                    <td class="shenpi_td_zhi">
                      <el-input v-model="form.beizhu" autocomplete="off" type="textarea"
                                style="width: 250px;margin-left: 10px"></el-input>
                    </td>
                  </tr>
                </table>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="closeTanChuang_edit">取 消</el-button>
                <el-button type="primary" @click="closeTanChuang_edit();queren_edit()">确 定</el-button>
              </div>
            </el-dialog>
          </div>
        </el-main>
      </div>
    </el-container>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        visible: false,
        dialogVisible: false,
        dialogFormVisible: false,
        material_list: true,
        chailiao_click_kucunshow: false,
        id:'',
        ghname:'',
        ghid:'',
        ipone:'',
        name: '',
        address: '',
        userchuanzhen:'',
        userbankziliao:'',
        useryoujiandizhi:'',
        textarea:'',
        /*   tableData:[],*/
        gruoplist:[],
        kucuntongji: [],
        form: {
          hanghao: '',
          weight: "",
          status: "",
          danjubianhao: "",
          zongbumingcheng: "",
          fendian: "",
          leikumingcheng: "",
          shuliang: "",
          id: "",
          beizhu:""
        },
        tableData: [
          {
            id:1,
            ghname: "爱迪尔",
            ghid: "ZSS",
            ipone: 123345678901,
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
            userchuanzhen:'',
            userbankziliao:'',
            useryoujiandizhi:'',
            textarea:'',
          },
          {
            id: 2,
            ghname: "爱迪尔2",
            ghid: "ZGS",
            ipone: 123345678901,
            name: "王小虎2",
            address: "上海市普陀区金沙江路 1518 弄",
            userchuanzhen:'',
            userbankziliao:'',
            useryoujiandizhi:'',
            textarea:'',
          },
          {
            id: 3,
            ghname: "爱迪尔3",
            ghid: "ZSGS",
            ipone: 123345678901,
            name: "王小虎3",
            address: "上海市普陀区金沙江路 1518 弄",
            userchuanzhen:'',
            userbankziliao:'',
            useryoujiandizhi:'',
            textarea:'',
          },
          {
            id: 4,
            ghname: "爱迪尔4",
            ghid: "SGS",
            ipone: 123345678901,
            name: "王小虎4",
            address: "上海市普陀区金沙江路 1518 弄",
            userchuanzhen:'',
            userbankziliao:'',
            useryoujiandizhi:'',
            textarea:'',
          },
          {
            id: 5,
            ghname: "爱迪尔5",
            ghid: "SGSs",
            ipone: 123345678901,
            name: "王小虎5",
            address: "上海市普陀区金沙江路 1518 弄",
            userchuanzhen:'',
            userbankziliao:'',
            useryoujiandizhi:'',
            textarea:'',
          },
          {
            id: 6,
            ghname: "爱迪尔6",
            ghid: "SGSg",
            ipone: 123345678901,
            name: "王小虎6",
            address: "上海市普陀区金沙江路 1518 弄",
            userchuanzhen:'',
            userbankziliao:'',
            useryoujiandizhi:'',
            textarea:'',
          },
          {
            id: 7,
            ghname: "爱迪尔7",
            ghid: "SGSSG",
            ipone: 123345678901,
            name: "王小虎7",
            address: "上海市普陀区金沙江路 1518 弄",
            userchuanzhen:'',
            userbankziliao:'',
            useryoujiandizhi:'',
            textarea:'',
          }
        ],
        options: [],
        value: [],
        dialogFormVisible_shenpi: false,
      }
    },
    methods: {
      handleClick(row) {
        console.log(row);
      },
      //分页
      currentPage: 1,
      pageSize: 3,
      currentTotal: 0,
      add(){
        var tabledata={
          id:this.id,
          name:this.name,
          ghid:this.ghid,
          ipone:this.ipone,
          address:this.address,
          ghname:this.ghname,
          userchuanzhen:this.userchuanzhen,
          userbankziliao:this.userbankziliao,
          useryoujiandizhi:this.useryoujiandizhi,
          textarea:this.textarea,
        };
        this.tableData.push(tabledata);
        this.dialogVisible = false
        this.id=this.ghid=this.name=""
        this.textarea=this.address=""
        this.ghname=this.ipone=this.ghid=this.userchuanzhen=""
        this.userbankziliao=this.useryoujiandizhi="";

      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
      onSubmit() {
        console.log('submit!');
        var newList=[];
        this.tableData.forEach(item =>{
          if(item.name.indexOf(id) != -1){
            newList.push(item)
          }
        })
        return newList
          .catch(err_ => {
            console.log(err)
          });
      },
      handleSizeChange(val) {
        this.pageSize = val;
        // console.log(`每页 ${val} 条`);
        //每次动态更新条数
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        console.log(111 + "当前第:" + val);
      },

      //编辑时获取当前行的id
      handleClick_edit(row) {
        this.form = row;
      },

      // 关闭编辑弹窗方法
      closeTanChuang_edit() {
        this.dialogFormVisible = false;
      },
      //打开编辑弹窗
      openTanChuang_edit() {
        this.dialogFormVisible = true;
      },
      tongji_chailiao_changeFun(val) {
        console.log(val);
        let new_list = [];
        if (val.length > 0) {
          for (let i = 0; i < val.length; i++) {
            new_list.push(val[i].id);
          }
        }
        this.tongji_multipleSelection = new_list;
      },

      queren_edit() {
        //获取到当前from,将数据提交到后台,前台可使用静态修改,减少不必要的数据请求
        let data = this.form;
        let id = this.form.id;
        // console.log(id);
        let index = this.tableData.findIndex(function (item) {
          return item.id == id;
        });
        this.tableData[index] = data;
      },
      //-创建商品中的选择拆料点击后显示的商品库存统计列表
      handleSizeChange1(val) {
        this.pageSize1 = val;
        // console.log(`每页 ${val} 条`);
        //每次动态更新条数
      },
      //删除提示框
      shanchu_open(scope_row_id) {
        this.$confirm('是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(() => {
          this.del2(scope_row_id);
          this.$message({
            type: 'success',
            message: '删除成功!',
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除'
          });
        });
      },
      del2(id){
        let index=this.tableData.findIndex( item =>{
          if(item.id == id){
            return true;
          }
        });
        console.log(index);
        this.tableData.splice(index,1)
      }
    },
    /*    beforeMount() {
         /!* this.$axios.get("url:/supplier_mnager/find_supplier.action")
            .then((res) => {
              console.log(res.data);
              this.tableData = res.data;
            }).catch((err) => {
            console.log(err);
          })*!/
          this.$axios.post("http://172.16.6.69:8080//supplier_mnager/find_supplier.action",{
            transformRequest:[
              function(data){
                let params = "";
                var arr = [];
                for(var key in data){
                  arr.push(key+"="+data[key]);
                }
                params = arr.join("&");
                return params;
              }
            ]
          }).then(
            (res=>{
                console.log(123);
                if(res.data.code == 200){
                  this.tableData=res.data.data.data;
                  console.log(res);
                  for (var i=0;i<res.data.data.data.length;i++){
    //                console.log(res.data.data.data.employeeGroup.employee_group_name);
                    var groupname=res.data.data.data[i].id;
                    this.gruoplist.push(groupname)
                  }

                  for(var z = 0; z < this.gruoplist.length; z++){
                    if(this.temp.indexOf(this.gruoplist[z]) == -1){
                      this.temp.push(this.gruoplist[z]);
                    }
                  }
                  console.log(this.temp);
                  console.log(this.tableData)
                }

              }
            )
          ).catch(
            (err)=>{
              console.log(err);
            }
          );
        }*/
  }
</script>

<style scoped>
  #box {
    background-color: #f6f6f6;
    width: 85%;
    min-height: 600px;
  }

  #table_gongying {
    margin-left: 35px;
    margin-top: 40px;
  }

  .permission_text {
    font-size: 30px;
    padding-top: 20px;
    padding-left: 15px;
  }

  .Breadcrumb {
    font-size: 12px;
    margin-top: 10px;
    margin-left: 10px;
    color: #999999;
  }

  .Breadcrumb span {
    margin-left: 10px;
  }

  .Breadcrumb span:nth-of-type(1), .Breadcrumb span:nth-of-type(3) {
    color: #3380FF;
  }

  .line {
    margin-top: 10px;
    margin-bottom: 30px;
    border-top: 1px solid #DADADA;
  }

  .subhead {
    font-size: 24px;
  }
  .shenpi_td_jian {
    width: 100px;
    text-align: right;
    font-size: 14px;
    color: #8C8B8D;
  }
  tr{
    padding-top: 50px;
  }

  .shenpi_td_zhi {
    width: 210px;
    font-size: 16px;
  }
</style>
